<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-sscale=1.0">
    <title>学员管理</title>
</head>

<body>
    <!-- 头部 -->
    <div>
        <label for="">姓名:</label>
        <input type="text" id="usernameInput">
        <label for="">学号:</label>
        <input type="text" id="snInput">
        <label for="">电话号码:</label>
        <input type="text" id="snInput">
        <button onclick="queryUser()">查询</button>
    </div>

    <!-- 数据 -->
    <div id="userTable">


    </div>

</body>
<script>

    function queryUser() {
        let name = document.getElementById("usernameInput").value;

        if (name.length == 0){
            name = "";
    } else {
        name = "query=name:" + name;
    }
        fetch("https://study.godoai.com/api/user/?"+name+"&limit=3&offset=0", {
            headers: {
                "Authorization": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NDU4MDAzNTIsImlhdCI6MTc0NTcxMzk1MiwibmFtZSI6Iue9l-aloCIsInIiOjEsInNuIjoiNTgyNDM1ODYifQ.isplWf_v9qhLfdxoujbYE425-umybzT4yn_C86JnfuI"
            }
        }).then(resp => resp.json()).then(data => {
            //console.log("收到的后端数据是:" + JSON.stringify(data));
            let usertabel = document.getElementById("userTable");
            data.forEach(element => {
                usertabel.innerHTML += `<li>` + element.Name + ` 学号:` + element.Sn + `</li>`;
            });
        })
    }

</script>

</html>